<!-- Please follow the format of the first anchor inside secition grideee -->
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css"/>
<link rel="stylesheet" type="text/css" href="stylesheets/demo.css"/>
<link rel="stylesheet" type="text/css" href="stylesheets/componenter.css"/>
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css"/>
<script src="js/snap.svg-min.js"></script>
<div class="containermmm">
  <h1 class="section-h1"><span class="white-border">Blog Posts</span></h1>
  <div class="blogText"><button class="blogBtn" onClick="toggleDisplay()">Back</button><div class="pText"></div></div>
  <section id="grideee" class="grideee clearfix">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://dev4god.wordpress.com/2016/01/16/gci-2015-2016-adventure-with-fossasia/" onclick="displayBlog(this, event, 1)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
	    <figure>
		  <img class="blogImage" src="img/blogs/1.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
          <!-- Insert your blog's title here-->
		    <h2>Adventure with FOSSASIA</h2>
          <!-- Insert your name here -->
		    <p>Pop Dany</p>
          <!-- Insert your blog url inside the '' - single quotes after location.href= -->
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://abdulhannanali.github.io/my-opensource-journey/graphql-tutorial/content/" onclick="displayBlog(this, event, 2)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/2.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Opensource to me</h2>
		    <p>Gabriel</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://gabrielleegci.wordpress.com/2016/01/16/what-open-source-means-to-me/" onclick="displayBlog(this, event, 3)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/3.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>GraphQL</h2>
		    <p>Addul Hannanali</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://fossasiablog.wordpress.com/" onclick="displayBlog(this, event, 4)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/4.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Why Opensource</h2>
		    <p>Tejashwa Tiwari</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://abdulhannanali.github.io/my-opensource-journey/interview-with-tj-holowaychuk/content/" onclick="displayBlog(this, event, 5)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/5.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>An interview</h2>
		    <p>Addul Hannanali</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://abdulhannanali.github.io/my-opensource-journey/what-opensource-means-to-me/content/" onclick="displayBlog(this, event, 6)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/6.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Opensource to me</h2>
		    <p>Addul Hannanali</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://sayanchaudhry.me/blog/open/source/2016/01/20/interview-with-open-souce.html" onclick="displayBlog(this, event, 7)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/7.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Open Source Interview</h2>
		    <p>Sayan Chaudhry</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://sayanchaudhry.me/blog/graphql/2016/01/01/learning-graphql.html" onclick="displayBlog(this, event, 8)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/8.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Learning GraphQL</h2>
        <p>Sayan Chaudhry</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.github.io/gci/post/codein-fossasia-experience/" onclick="displayBlog(this, event, 9)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/9.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Code-in Experience</h2>
        <p>Muhammad Yasoob</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.github.io/gci/post/github-nodejs-express/" onclick="displayBlog(this, event, 10)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/10.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>GitHub OAuth Authentication</h2>
        <p>Muhammad Yasoob</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.github.io/gci/post/django-email/" onclick="displayBlog(this, event, 11)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/11.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Sending Email Through Django</h2>
        <p>Muhammad Yasoob</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.github.io/gci/post/html5-fileapi-useage/" onclick="displayBlog(this, event, 12)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/12.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>HTML5 And JS File API</h2>
        <p>Muhammad Yasoob</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://juanfverhook.wordpress.com/2015/12/15/quick-guide-to-virtualenv-and-virtualenvwrapper/" onclick="displayBlog(this, event, 13)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/13.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Quick guide to virtualenv and virtualenvwrapper</h2>
        <p>Juan F. Verhook</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://juanvulcano.github.io/post/What-open-source-is-for-me/" onclick="displayBlog(this, event, 14)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/14.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>The true face of open source</h2>
		    <p>Juan F. Verhook</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>


 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://gabrielleegci.wordpress.com/2016/01/16/my-experience-in-using-irc-internet-relay-chat/" onclick="displayBlog(this, event, 15)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/15.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>My experience on IRC</h2>
		    <p>Gabriel</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="http://yasoob.me/gci/post/flask-login-app/" onclick="displayBlog(this, event, 16)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
  <figure>
  <img class="blogImage" src="img/blogs/16.png"/>
  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
  <figcaption>
    <h2>Flask app with login functionality</h2>
    <p>Muhammad Yasoob</p>
    <button>View Blog</button>
  </figcaption>
  </figure>
</a>
</div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://saatvikarya.io/learn-git/" onclick="displayBlog(this, event, 17)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/17.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Git in one page</h2>
		    <p>Saatkiv Arya</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>


  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://codethejason.github.io/blog/sitebugfixes/" onclick="displayBlog(this, event, 18)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/18.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Bug Fixes on GCI Site</h2>
		    <p>Jason Wong</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>


  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://codethejason.github.io/blog/pharousermanagement/" onclick="displayBlog(this, event, 19)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/19.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Pharo User Management App</h2>
		    <p>Jason Wong</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://codethejason.github.io/blog/nodejs/" onclick="displayBlog(this, event, 20)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/20.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Using NodeJS for the First Time</h2>
		    <p>Jason Wong</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.me/gci/post/installing-hugo/" onclick="displayBlog(this, event, 21)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/21.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>Getting Started with Hugo on Ubuntu 14.04</h2>
		    <p>Muhammad Yasoob</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>


  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.me/gci/post/kivy-intro/" onclick="displayBlog(this, event, 22)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/22.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>An Intro to Kivy</h2>
		    <p>Muhammad Yasoob</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://codethejason.github.io/blog/gciexperience/" onclick="displayBlog(this, event, 23)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
	    <figure>
		  <img class="blogImage" src="img/blogs/23.png"/>
		  <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
		  <figcaption>
		    <h2>My GCI Experience</h2>
		    <p>Jason Wong</p>
		    <button>View Blog</button>
		  </figcaption>
	    </figure>
	  </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yagogg.github.io/blog/google-code-in-2015/16/" onclick="displayBlog(this, event, 24)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/24.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Google Code-in 2015/16</h2>
        <p>Yago González</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://sayanchaudhry.me/blog/jekyll/2015/12/29/getting-started-with-jekyll.markdown.html" onclick="displayBlog(this, event, 25)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/25.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Starting with Jekyll</h2>
        <p>Sayan Chaudhry</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://poprosturonin.github.io/post/setupHugo/" onclick="displayBlog(this, event, 26)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/26.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>How to setup a blog using Hugo</h2>
        <p>Bartosz Wiśniewski</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://juanvulcano.github.io/post/What-open-source-is-for-me/" onclick="displayBlog(this, event, 27)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/27.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>What Open Source Is For Me</h2>
        <p>Juan F. Verhook</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://codein-dwij.github.io/blog_hugo/post/fossasia/" onclick="displayBlog(this, event, 28)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/28.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Fossasia - Codein Organiser</h2>
        <p>Dwij Jha</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://yasoob.me/gci/post/scraping-euro-parliament/" onclick="displayBlog(this, event, 29)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
        <img class="blogImage" src="img/blogs/29.png"/>
        <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
        <figcaption>
          <h2>Scraping Euro Parliament</h2>
          <p>Muhammad Yasoob</p>
          <button>View Blog</button>
        </figcaption>
      </figure>
    </a>
  </div>
  
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://pohsaykeong.github.io/Jekyll/" onclick="displayBlog(this, event, 30)" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
        <img class="blogImage" src="img/blogs/30.png"/>
        <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
        <figcaption>
          <h2>A conclusion to Google Code-in 2015</h2>
          <p>Poh Say Keong</p>
          <button>View Blog</button>
        </figcaption>
      </figure>
    </a>
  </div>

   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="https://sumedhsupe.wordpress.com/2016/01/24/how-the-gci-ends/" onclick="displayBlog(this, event, [previous id +1])" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
        <figure>
          <img class="blogImage" src="img/blogs/31.PNG"/>
          <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
          <figcaption>
            <h2>How the GCI ends!</h2>
            <p>Sumedh Supe</p>
            <button>View Blog</button>
          </figcaption>
        </figure>
      </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <a href="http://juanvulcano.github.io/post/goodbye-gci/" onclick="displayBlog(this, event, [previous id +1])" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z" id="eli">
      <figure>
      <img class="blogImage" src="img/blogs/32.png"/>
      <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,190 0,268 0,0 180,0 z"/></svg>
      <figcaption>
        <h2>Goodbye GCI, Hello Open Source!</h2>
        <p>Juan F. Verhook</p>
        <button>View Blog</button>
      </figcaption>
      </figure>
    </a>
  </div>


</section>
</div>
<script>
(function(){
	function init(){
		var speed=250,
		easing=mina.easeinout;
    	[].slice.call(document.querySelectorAll('#grideee > a')).forEach(function(el){
	  		var s=Snap(el.querySelector('svg')),path=s.select('path'),
	 	    pathConfig={
				from:path.attr('d'),
				to:el.getAttribute('data-path-hover')
			};
            el.addEventListener('mouseenter',function(){
				path.animate({'path':pathConfig.to},speed,easing);
			});
            el.addEventListener('mouseleave',function() {
				path.animate({'path':pathConfig.from},speed,easing );
			});
		});
	}
	init();
})();
</script>
